<template>
  <div class="container">
    <p class="bold">合作共赢</p>
    <div class="rowTwo">
      <ul>
        <li v-for="(item,index) in list1" :key="index">
          <img :src="list2[index][0]" alt="" class="img-style">
          <p v-if="index==0">{{item[0]}}</p>
          <img v-if="index==0" style="margin-top:120px;" src="../../assets/img/agent/28.png" alt="">
          <p v-if="index==0" style="font-size:14px;margin-top:10px;">{{item[1]}}</p>
          <p v-if="index==1"> {{item[0]}}</p>
          <p v-if="index==1" class="p2"><img src="../../assets/img/agent/29.png" alt="">{{item[1]}}</p>
          <p v-if="index==1" class="p2"><img src="../../assets/img/agent/30.png" alt="">{{item[2]}}</p>
          <p v-if="index==1" class="p2"> <img src="../../assets/img/agent/31.png" alt="">{{item[3]}}</p>
          <p v-if="index==1" class="p2"> <img src="../../assets/img/agent/32.png" alt="">{{item[4]}}</p>
          <p v-if="index==1" class="p2"> <img src="../../assets/img/agent/33.png" alt="">{{item[5]}}</p>
          <p v-if="index==2">{{item[0]}}</p>
          <p v-if="index==2" style="margin-bottom:10px;font-size:15px;">{{item[1]}}</p>
          <p v-if="index==2" class="p3">{{item[2]}}</p>
          <p v-if="index==2" class="p3">{{item[3]}}</p>
          <p v-if="index==2" class="p3">{{item[4]}}</p>
          <p v-if="index==2" class="p3">{{item[5]}}</p>
          <p v-if="index==2" class="p3">{{item[6]}}</p>
          <p v-if="index==3">{{item[0]}}</p>
          <p v-if="index==3" style="margin-bottom:10px;font-size:15px;">{{item[1]}}</p>
          <p v-if="index==3" class="p3">{{item[2]}}</p>
          <p v-if="index==3" class="p3">{{item[3]}}</p>
          <p v-if="index==3" class="p3">{{item[4]}}</p>
          <p v-if="index==3" class="p3">{{item[5]}}</p>
          <p v-if="index==4">{{item[0]}}</p>
          <p v-if="index==4" style="margin-bottom:10px;font-size:15px;">{{item[1]}}</p>
          <p v-if="index==4" class="p3">{{item[2]}}</p>
          <p v-if="index==4" class="p3">{{item[3]}}</p>
          <p v-if="index==4" class="p3">{{item[4]}}</p>
        </li>
        <img src="../../assets/img/mediaIn/professional/arrow.png" alt="" class="arrow1">
        <img src="../../assets/img/mediaIn/professional/arrow.png" alt="" class="arrow2">
      </ul>
    </div>
  </div>
</template>
<script>
const img1 = require('../../assets/img/agent/27.png')
const img2 = require('../../assets/img/agent/34.png')
const img3 = require('../../assets/img/agent/36.png')
const img4 = require('../../assets/img/agent/37.png')
const img5 = require('../../assets/img/agent/38.png')
const img6 = require('../../assets/img/mediaIn/provide/66.png')
export default {
  data() {
    return {
      list1: [
        ['合作模式', '平台代理'],
        ['合作流程', '需求沟通', '签约', '资料提供', '应用培训', '运营指导'],
        [
          '合作优势',
          '技术支持',
          '全自动智能技术',
          '人群分析技术',
          '个性化推荐技术',
          '全网跨屏',
          'LBS定向'
        ],
        [
          '',
          '资源共享',
          '十亿级用户数据',
          '7千万实时电商数据',
          '海量移动端/PC端/视频资源',
          '本地客户资源分配'
        ],
        ['', '全程服务', '市场开发扶持', '后期运营支持', '每周线上培训']
      ],
      list2: [
        [img1, img1],
        [img1, img1],
        [img2, img2],
        [img3, img3],
        [img4, img4]
      ]
    }
  },
  methods: {
    show(index) {
      this.list2[0][0] = img1
      this.list2[1][0] = img2
      this.list2[2][0] = img3
      this.list2[index].splice(0, 1, this.list2[index][1])
    }
  }
}
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
  margin-bottom: 50px;
}
.bold {
  font-size: 30px;
  font-weight: bold;
}
.rowTwo {
  margin-top: 60px;
}
.rowTwo ul {
  overflow: hidden;
  height: 280px;
  padding-left: 10px;
  position: relative;
}
.rowTwo ul li {
  /* 336 * 3  1008 192 96 */
  width: 230px;
  height: 256px;
  text-align: center;
  float: left;
  margin-left: 10px;
  position: relative;
}
.img-style {
  width: 230px;
  height: 256px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.rowTwo ul li:nth-child(1) {
  margin-left: 0px;
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li:nth-child(2) {
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li:nth-child(3) {
  background-position: top center;
  background-repeat: no-repeat;
}
.rowTwo ul li p {
  font-size: 16px;
  color: rgb(34, 34, 34);
  font-weight: bold;
}
.rowTwo ul li p:nth-child(2) {
  position: absolute;
  font-size: 16px;
  color: #fff;
  top: 45px;
  left: 85px;
}
.rowTwo ul li p:nth-child(3) {
  margin-top: 92px;
}

.rowTwo ul li img {
  margin-top: 30px;
}
.rowTwo > ul > li > .p2 {
  font-size: 14px;
  position: relative;
  text-align: left;
  padding-left: 80px;
  margin-top: 10px;
}
.rowTwo > ul > li > .p2 > img {
  position: absolute;
  top: -26px;
  left: 58px;
}
.rowTwo > ul > li > .p3 {
  font-size: 14px;
  margin-top: 5px;
  font-weight:200;
}
.arrow1 {
  position: absolute;
  top: 128px;
  right: 456px;
}
.arrow2 {
  position: absolute;
  top: 128px;
  right: 200px;
}
</style>


